import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import './index.css'

function CampusListPage() {
  const navigate = useNavigate()

  // 院区数据
  const campuses = [
    {
      id: 1,
      name: '四川省保健院南苑',
      address: '四川省成都市锦江区画溪路666号',
      icon: '🏥'
    },
    {
      id: 2,
      name: '四川省保健院北苑',
      address: '四川省成都市锦江区画溪路666号',
      icon: '🏥'
    },
    {
      id: 3,
      name: '四川省保健院体检中心',
      address: '四川省成都市锦江区画溪路666号',
      icon: '🏥'
    }
  ]

  // 处理院区选择
  const handleCampusSelect = (campusId: number) => {
    // 跳转到科室选择页面
    const selectedCampusData = campuses.find(campus => campus.id === campusId)
    navigate('/department-list', { state: { campus: selectedCampusData } })
  }

  return (
    <div style={{ minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{ 
        background: '#fff', 
        padding: '12px 16px', 
        borderBottom: '1px solid #eee',
        position: 'sticky',
        top: 0,
        zIndex: 100
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <button 
              onClick={() => navigate(-1)}
              style={{ 
                border: 'none', 
                background: 'none', 
                fontSize: 18, 
                marginRight: 12,
                cursor: 'pointer'
              }}
            >
              ←
            </button>
            <h1 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>
              院区列表
            </h1>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, color: '#94a3b8' }}>
            <span style={{ fontSize: 22, lineHeight: 1 }}>⋯</span>
            <span style={{ fontSize: 18 }}>◁</span>
          </div>
        </div>
      </div>

      {/* 主要内容 */}
      <div style={{ padding: '16px' }}>
        {/* 提示文字 */}
        <div style={{ 
          fontSize: 14, 
          color: '#666', 
          marginBottom: 16,
          textAlign: 'center'
        }}>
          请选择院区
        </div>

        {/* 院区列表 */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {campuses.map((campus) => (
            <div
              key={campus.id}
              onClick={() => handleCampusSelect(campus.id)}
              style={{
                background: '#fff',
                borderRadius: 12,
                padding: 16,
                display: 'flex',
                alignItems: 'center',
                gap: 12,
                cursor: 'pointer',
                border: '1px solid #e5e7eb',
                transition: 'all 0.2s ease',
                boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-1px)'
                e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)'
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)'
                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.06)'
              }}
            >
              {/* 院区图标 */}
              <div style={{
                width: 48,
                height: 48,
                borderRadius: 8,
                background: 'linear-gradient(135deg, #e8f3ff, #d4e7ff)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: 24
              }}>
                {campus.icon}
              </div>

              {/* 院区信息 */}
              <div style={{ flex: 1 }}>
                <div style={{ 
                  fontSize: 16, 
                  fontWeight: 600, 
                  color: '#333',
                  marginBottom: 4
                }}>
                  {campus.name}
                </div>
                <div style={{ 
                  fontSize: 14, 
                  color: '#666',
                  lineHeight: 1.4
                }}>
                  {campus.address}
                </div>
              </div>


            </div>
          ))}
        </div>


      </div>
    </div>
  )
}

export default CampusListPage
